<template>
  <view class="u-page">
    <up-form ref="formRef" :model="user" :rules="rules" labelPosition="left" :labelWidth="80">
      <up-form-item label="头像:" prop="avatar" required>
        <avatar v-model="user.avatar"></avatar>
      </up-form-item>
      <up-form-item label="用户昵称:" prop="nickName" required>
        <up-input v-model="user.nickName" clearable
                  placeholder="请输入用户昵称"></up-input>
      </up-form-item>
      <up-form-item label="手机号码:" prop="phonenumber" required>
        <up-input v-model="user.phonenumber" clearable
                  placeholder="请输入手机号码"></up-input>
      </up-form-item>
      <up-form-item label="邮箱:" prop="email" required>
        <up-input v-model="user.email" clearable placeholder="请输入邮箱"></up-input>
        <!-- <up-row customStyle="margin-bottom: 10px">
           <up-col :span="12">

           </up-col>
            <up-col span="3">
             <up-button :text="bindingEmail.btnText" type="primary" @click="navigateToBindingEmail"></up-button>
           </up-col>
        </up-row>-->
      </up-form-item>
      <up-form-item label="性别:" prop="sex" required>
        <PickerRadio v-model="user.sex" placeholder="请选择性别" :options="sys_user_sex"
                     title="请选择性别"></PickerRadio>
      </up-form-item>
      <up-button type="primary" text="提交" @click="submit"></up-button>
    </up-form>

    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>

<script setup lang="ts">
import { to } from 'await-to-js';
import { useUserStore } from '@/store/modules/user';
import avatar from '../avatar/index.vue';

const userStore = useUserStore();
const { sys_user_sex } = toRefs<any>(useDict('sys_user_sex'));

const uToastRef = ref(null);

const user = ref({ nickName: '', phonenumber: '', email: '', sex: '' });

const bindingEmail = ref({ btnText: '绑定' });
const rules = ref({
  nickName: [
    {
      required: true,
      message: '用户昵称不能为空',
      trigger: ['change', 'blur']
    }
  ],
  phonenumber: [
    {
      required: true,
      message: '手机号码不能为空',
      trigger: ['change', 'blur']
    },
    {
      // 自定义验证函数，见上说明
      validator: (rule, value, callback) => {
        // 上面有说，返回true表示校验通过，返回false表示不通过
        // uni.$u.test.mobile()就是返回true或者false的
        return uni.$u.test.mobile(value);
      },
      message: '请输入正确的手机号码',
      // 触发器可以同时用blur和change
      trigger: ['change', 'blur']
    }
  ],
  email: [
    {
      required: true,
      message: '请绑定邮箱',
      trigger: ['change', 'blur']
    },
    {
      // 自定义验证函数，见上说明
      validator: (rule, value, callback) => {
        // 上面有说，返回true表示校验通过，返回false表示不通过
        // uni.$u.test.mobile()就是返回true或者false的
        return uni.$u.test.email(value);
      },
      message: '请输入正确的邮箱地址',
      // 触发器可以同时用blur和change
      trigger: ['change', 'blur']
    }
  ]
});
const formRef = ref();

const getUser = async () => {
  const res = await userStore.getInfo();
  user.value = res.data.user;
  // if (user.value.email) {
  //   bindingEmail.value.btnText = "换绑"
  // }
};
const submit = async () => {
  const [validateErr, validateRes] = await to(formRef.value.validate());
  if (validateErr) return;
  const from = {
    userId: user.value.userId,
    avatar: user.value.avatar,
    nickName: user.value.nickName,
    phonenumber: user.value.phonenumber,
    sex: user.value.sex,
    email: user.value.email
  };
  const [err, res] = await to(uni.$u.http.put(`/system/appUser/profile`, from));
  if (res) {
    getUser();

    uToastRef.value.show({
      type: 'default',
      message: '修改成功',
      position: 'top',
      duration: 1000,
      complete() {
        tab.navigateBack();
      }
    });
  }
};
//展示绑定邮箱模态框
const navigateToBindingEmail = () => {
  tab.navigateTo('/pages/mine/info/bindingEmail?user=' + encodeURIComponent(JSON.stringify(user.value)));
};

onMounted(() => {
  getUser();
});
</script>

<style lang="scss" scoped>
.u-page {
  padding-left: 20px;
}
</style>
